<template>
	<div>
		<div style="background: #F6F6F6;margin-bottom: 10px;border-radius: 4px;;">
			<el-row :gutter="20">
				<el-col :span="10">
					<div style="background: #fff;border-radius: 4px;">
						<div style="padding: 10px 10px 0;">
							<el-date-picker type="year" v-model="year" @change="getData" :clearable="false" format="yyyy"
								value-format="yyyy"></el-date-picker>
						</div>
						<div style="padding:0 10px;" class="displayFlexBet">
							<div
								style="background: #2B04C3;text-align: center;padding: 20px 30px;color: #fff;border-radius: 16px;flex: 1;">

								<div style="font-size: 16px;font-weight: bold;">{{dataList2.totalNum}}</div>
								<div style="font-size: 12px;margin-top: 5px;color: #37BEF0;">总废气排口</div>
							</div>
							<div class="gasListItem2" style="margin: 0 10px;">
								<div style="font-size: 16px;margin-bottom: 10px;">{{dataList2.organizedNum}}</div>
								<div style="font-size: 12px;margin-top: 5px;">有组织排口</div>
								<img src="@/assets/sIcon65.png"
									style="width: 25px;height:25px;position: absolute;top: 10px;right: 10px;" />
							</div>
							<div class="gaslistItem3">
								<div style="font-size: 16px;margin-bottom: 10px;">{{dataList2.disorganizedNum}}</div>
								<div style="font-size: 12px;margin-top: 5px;">无组织排口</div>
								<img src="@/assets/sIcon66.png"
									style="width: 25px;height:25px;position: absolute;top: 10px;right: 10px;" />
							</div>
						</div>
					</div>
				</el-col>
				<el-col :span="14">
					<div class="displayFlexBet">
						<div class="u-border pad20 u-borderRadius8 text-center mr10 bgfff" style="flex: 1;">
							<el-progress type="circle" :percentage="dataList2.standingBookPercent" color="#3A3EF4" :width="80"
								:stroke-width="8"></el-progress>
							<div style="margin-top: 10px;color: #888888;" class="font11">台账完成率</div>
						</div>

						<div class="u-border pad20 u-borderRadius8 text-center mr10 bgfff" style="flex: 1;">
							<el-progress type="circle"
								:percentage="(dataList2.completeProblemNum/dataList2.totalProblemNum)*100" :format="()=>{
									return dataList2.completeProblemNum+'/'+dataList2.totalProblemNum
								}" color="#3A3EF4" :width="80" :stroke-width="8"></el-progress>
							<div style="margin-top: 10px;color: #888888;" class="font11">问题工单</div>
						</div>

						<div class="u-border pad20 u-borderRadius8 text-center mr10 bgfff" style="flex: 1;">
							<el-progress type="circle" :percentage="dataList2.surveyPercent" color="#3A3EF4" :width="80"
								:stroke-width="8"></el-progress>
							<div style="margin-top: 10px;color: #888888;" class="font11">自行监测完成率</div>
						</div>

						<div class="u-border pad20 u-borderRadius8 text-center bgfff" style="flex: 1;">
							<!-- <el-progress type="circle" :percentage="dataList2.onlineMonitorWarning" :format="()=>{
									return ''+dataList2.onlineMonitorWarning
								}"></el-progress> -->
							<div class="listBg4 font23" style="width: 80px;line-height: 80px;color: #333;margin: 0 auto;">
								{{dataList2.onlineMonitorWarning}}
							</div>
							<div style="margin-top: 10px;color: #888888;" class="font11">在线监测预警</div>
						</div>
					</div>

				</el-col>
			</el-row>
		</div>

		<div class="displayFlex bgfff pad15 mb10" style="border-radius: 8px;">
			<div @click="activeName = 'first'" class="mr30 point color555" :class="[activeName == 'first'?'selected':'']">
				有组织排放口
			</div>
			<div @click="activeName = 'second'" :class="[activeName == 'second'?'selected':'']" class="point color555">
				无组织排放口
			</div>
		</div>

		<div class="displayFlexBet bgfff pad15 mb10 color555" style="border-radius: 8px;">
			<div style="flex: 2;">排口</div>
			<template v-if="activeName == 'first'">
				<div style="flex: 2; ">设备设施状况</div>
				<!-- <div style="flex: 3;">污染防治设施巡检</div> -->
				<!-- <div style="flex: 2; ">发现问题</div> -->
				<!-- <div style="flex: 2; ">药剂及原辅材料</div> -->
				<div style="flex: 2; ">运行台账</div>

			</template>

			<div style="flex: 2; ">自行监测</div>

			<div style="flex: 2;">24小时在线监测预警</div>
			<div style="flex: 2;">年度告警</div>
		</div>

		<div style="border-radius: 8px;" class="color555" v-loading="loading">
			<template v-if="activeName == 'first'">
				<div v-if="gasOutletList1.length > 0">
					<div v-for="(item,index) in gasOutletList1" :key="index" class="point mb10 bgfff bra8"
						style="padding:10px 20px;display: flex;justify-content: space-between;" @click="gotoDetail(item)">
						<div style="font-size: 16px;flex: 2;color: #555">
							<div style="width: 70%;">{{item.outletName}}</div>
						</div>

						<div style="flex: 2; " class="font13">
							<div v-if="item.defenceInspectList && item.defenceInspectList.length > 0">
								<div v-for="(item2,index2) in item.defenceInspectList" :key="index2" class="mb10 point"
									@click.stop="gotoDefenceDetail(item2)">
									<span style="margin-right: 10px;">{{item2.defenceName}}</span>
									<span v-if="item2.resultStr == '异常'" style="color: #F56C6C;">{{item2.resultStr}}</span>
									<span v-else>{{item2.resultStr}}</span>
								</div>
							</div>
							<div v-else style="color: #999;">暂无数据</div>
						</div>

						<div style="flex: 2; " class="font13">
							<div class="mb10">
								<span>应做 </span>
								<span>{{item.totalStandingBookNum}}</span>
							</div>
							<div class="mb10">
								<span>已做 </span>
								<span>{{item.completeStandingBookNum}}</span>
							</div>
							<div>
								<span>缺 </span>
								<span>{{item.remainStandingBookNum}}</span>
							</div>
						</div>

						<div style="flex: 2; " class="font13">
							<div class="mb10">
								<span>频率 </span>
								<span>{{item.frequencyStr}}</span>
							</div>

							<div class="mb10">
								<span>应做 </span>
								<span>{{item.totalSurvey}}</span>
							</div>
							<div class="mb10">
								<span>已做 </span>
								<span>{{item.completeSurvey}}</span>
							</div>
							<div class="mb10">
								<span>缺 </span>
								<span>{{item.remainSurvey}}</span>
							</div>

						</div>
						<div style="flex: 2; " class="font13">
							<div>
								<el-progress type="circle" :percentage="item.onlineMonitorWarning" :format="()=>{
												return ''+item.onlineMonitorWarning
											}" color="#BED4FF" :width="80" :stroke-width="8"></el-progress>
							</div>
						</div>

						<div style="flex: 2; " class="font13">
							<div>
								<el-progress type="circle" :percentage="item.onlineMonitorProblem" :format="()=>{
												return ''+item.onlineMonitorProblem
											}" color="#BED4FF" :width="80" :stroke-width="8"></el-progress>
							</div>
						</div>
					</div>

				</div>
				<el-empty v-else />
			</template>

			<template v-if="activeName == 'second'">
				<div v-if="gasOutletList2.length > 0">
					<div v-for="(item,index) in gasOutletList2" :key="index" class="point mb10 bgfff"
						style="padding:10px 20px;display: flex;justify-content: space-between;" @click="gotoDetail(item)">
						<div style="font-size: 16px;flex: 2;color: #555">
							<div style="width: 70%;">{{item.outletName}}</div>
						</div>
						<div style="flex: 2;" class="font13">
							<div class="mb10">
								<span>频率 </span>
								<span>{{item.frequencyStr}}</span>
							</div>
							<div class="mb10">
								<span>应做 </span>
								<span>{{item.totalSurvey}}</span>
							</div>
							<div class="mb10">
								<span>已做 </span>
								<span>{{item.completeSurvey}}</span>
							</div>
							<div>
								<span>缺 </span>
								<span>{{item.remainSurvey}}</span>
							</div>
						</div>
						<div style="flex: 2; " class="font13">
							<div v-if="item.pollutionList && item.pollutionList.length > 0">
								<div v-for="(item2,index2) in item.pollutionList" :key="index2" class="mb10">
									<span style="margin-right: 10px;">{{item2.pollutionName}}</span>
									<span>{{item2.actualAmount}}</span>
								</div>
							</div>
							<div v-else style="color: #999;">暂无数据</div>
						</div>
						<div style="flex: 2; " class="font13">
							<div>
								<el-progress type="circle" :percentage="item.onlineMonitorWarning" :format="()=>{
											return ''+item.onlineMonitorWarning
										}" color="#BED4FF" :width="80" :stroke-width="8"></el-progress>
							</div>
						</div>
					</div>

				</div>
				<el-empty v-else />
			</template>
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	import HomeMock from "@/assets/mock/HomeMock.json"

	let that
	export default {
		name: "wasteGasHome",
		components: {},
		data() {
			return {
				activeName: "first",
				year: moment().format('YYYY'),
				ticketId: this.$store.state.token,
				data2: {},
				data3: {},
				dataList1: {},
				dataList2: {
					completeProblemNum: 0,
					totalProblemNum: 0,
				},
				dataList3: {},
				dataList4: [],
				gasMonitorPollutionList: [],
				gasPollution: {},
				waterMonitorPollutionList: [],
				waterPollution: {},
				productList: [],
				productId: '',
				materialMonthQtyList: [],
				gasOutletList1: [],
				gasOutletList2: [],
				mock2: false,
				loading: false,
			}
		},
		created: function() {},
		mounted: function() {
			that = this;
			that.getData()
		},

		methods: {

			getData() {
				that.getExecuteList()
				that.getHomepageGasOutletList()
			},

			gotoDetail(item) {
				that.$router.push("/wasteGas/outletDetail?outletId=" + item.outletId + "&outletName=" + item.outletName +
					"&titleName=" + item.outletName)
			},

			gotoDefenceDetail(item) {
				that.$router.push("/wasteGas/outletInspectDefDet?defenceId=" + item.defenceId+"&titleName=" + item.defenceName)
			},

			getHomepageGasOutletList() {
				//console.log(value)
				that.loading = true
				that.ajax({
					url: 'homepage/getHomepageGasOutletList',
					contentType: 'application/json',
					data: JSON.stringify({
						year: that.year,
						approach: "ORGANIZED_OUTLET"
					}),
					success: function(result) {
						that.loading = false
						if (result.data) {
							that.gasOutletList1 = result.data
						}
					},
				})

				that.ajax({
					url: 'homepage/getHomepageGasOutletList',
					contentType: 'application/json',
					data: JSON.stringify({
						year: that.year,
						approach: "DISORGANIZED_OUTLET"
					}),
					success: function(result) {
						if (result.data) {
							that.gasOutletList2 = result.data
						}
					},
				})
			},

			getExecuteList() {
				that.ajax({
					url: '/outletHomepage/countHomepageGasOutlet',
					data: JSON.stringify({
						year: that.year
					}),
					contentType: 'application/json',
					success: function(result) {
						that.mock2 = false
						if (result.status == -5) {
							result.data = HomeMock.feiqi
							that.mock2 = true
						}
						if (result.data) {
							that.dataList2 = result.data
						}
					},
				}, false)
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selected {
		color: #3A3EF4;
		font-weight: bold;
	}

	.text_overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: break-all;
	}

	.gasListItem2 {
		background: #9BCEA5;
		text-align: center;
		color: #fff;
		padding: 20px;
		margin: 10px 0;
		color: #000;
		border-radius: 16px;
		position: relative;
		flex: 1;
	}

	.gaslistItem3 {
		background: #FFC895;
		text-align: center;
		color: #fff;
		padding: 20px;
		margin: 10px 0;
		color: #000;
		border-radius: 16px;
		position: relative;
		flex: 1;
	}

	.listBg4 {
		background-image: url("../../assets/sIcon55.png");
		background-size: 100% 100%;
	}

	>>>.el-progress__text {
		font-size: 18px !important;
		color: #000 !important;
	}

	.point:hover {
		background-color: #fafafa;
		/* 鼠标悬停颜色 */
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}
</style>